<!DOCTYPE html>
<html lang="en">
<head>
    <!--实物商品-->
    <title>车型管理</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/layui-2.4.2/src/css/layui.css">
    <script type="text/javascript" src="/jquery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/layui-2.4.2/src/layui.js"></script>
    <script type="text/javascript" src="/wangEditor.min.js"></script>
    <script type="text/javascript" src="/common.js"></script>

</head>
<body>
    <div>
        <div class="layui-row">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline" style="float:left;">
                        <button class="layui-btn" id="createCarModel">新增车型</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <table id="car_model_view" lay-filter="car_model_view_filter">

            </table>
        </div>


    </div>
<!--车型编辑浮层-->
<form class="layui-form" id="edit_carModel" action="" style="display:none;margin-top: 30px;">
    <div class="layui-form-item">
        <label class="layui-form-label">车型名称</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="modelName" id="modelName" autocomplete="off" placeholder="请输入车型名称" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">可载人数</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="numberOfPeople" id="numberOfPeople" placeholder="请输入可载人数" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" >
        <label class="layui-form-label">可载行李数</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="numberOfLuggage" id="numberOfLuggage" placeholder="请输入可载行李数" class="layui-input">
        </div>
    </div>
    <br/>
</form>
    <!--表格toobar模板-->
    <script type="text/html" id="toolOper">
        <!--<a class="layui-btn layui-btn-xs" lay-event="edit">删除</a>-->
    </script>
    <script type="text/javascript">
    </script>
    <script>

    layui.use(['element','table','form','upload','laytpl'], function(){
        var table=layui.table;

        table.render({
            elem:'#car_model_view',
            url:'/carModel/list',
            page:true,
            size:10,
            limits:[10,20,50,100],
            cols:[
                [
                    {field:'modelId',title:'车型编号'},
                    {field:'modelName',title:'车型名称'},
                    {field:'numberOfPeople',title:'可载人数'},
                    {field:'numberOfLuggage',title:'可载行李数'}
                ]
            ],
            response:{
                status:'errorCode',
                countName:'total',
                dataName:'data'
            }
        });


        $('#createCarModel').on('click',function(){
            layer.open({
                type:1,
                area:['880px','600px'],
                content:$("#edit_carModel"),
                btn:['保存','取消'],
                btnALign:'c',
                yes:function(){
                    if ($("#modelName").val() == ''){
                        alert('车型名称不允许为空');
                        return;
                    }
                    if ($("#numberOfPeople").val() == ''){
                        alert('可载人数不允许为空');
                        return;
                    }
                    if ($("#numberOfLuggage").val() == ''){
                        alert('可载行李数不允许为空');
                        return;
                    }
                      $.ajax({
                          type:'post',
                          data:$('#edit_carModel').serialize(),
                          url:'/carModel/save',
                          cache:false,
                          dataType:'json',
                          success:function(data){
                              layer.closeAll();
                              $(".layui-laypage-btn").click()
                          }
                      });
                },
            });
        });

    });
</script>

</body>
</html>